<template>
	<div>
		<mobile-common-pop v-model="isShow" @update:sure="handleSure">
			<template #default>
				<div class="hot">
					<div class="hot-title">
						<div class="hot-title-text">热门标签</div>
						<div class="hot-title-close">
							<img src="@/assets/svgs/mobile_close.svg" alt="关闭" @click.stop="hanlderClose" />
						</div>
					</div>
					<div class="hot-tags" @click="handlerChange($event)" ref="hotTags">
						<div class="hot-tags-item" v-for="item in 10" :key="item" :class="{ 'is-active': item === 1 }">
							<span>{{ item }}</span>
						</div>
					</div>
				</div>
			</template>
		</mobile-common-pop>
	</div>
</template>

<script setup>
	const mode = defineModel();
	const isShow = ref(mode);
	const emits = defineEmits(['update:sure', 'update:close']);
	const hotTagsIns = useTemplateRef('hotTags');
	let activeItemIns = null;
	const handleSure = val => {
		emits('update:sure', activeItemIns);
	};
function hanlderClose() {
		console.log(222)
		emits('update:close');
	}
	function handlerChange(e) {
		const target = e.target;
		if (target.classList.contains('hot-tags-item')) {
			const activeItem = hotTagsIns.value.querySelector('.is-active');
			activeItem?.classList.remove('is-active');
			target.classList.toggle('is-active');
			activeItemIns = activeItem;
		}
	}
</script>

<style lang="scss" scoped>
	.hot {
		width: 100%;
		.hot-title {
			@include flex(_, space-between);
			margin-bottom: 40px;
			.hot-title-text {
				@include font(_, 28px, _, 700, var(--blog-normal-text-color));
			}
			.hot-title-close {
				width: 40px;
				height: 40px;
			}
		}
		.hot-tags {
			display: grid;
			grid-template-columns: repeat(3, 1fr); /* 一行三列，每列等宽 */
			gap: 10px; /* 网格之间的间隔 */
			.hot-tags-item {
				width: 224px;
				@include mobileVwCalc(224px);
				height: 60px;
				border-radius: var(--blog-box-radius);
				background-color: var(--blog-box-bg-color-gray);
				@include flex();
				@include font(_, 26px, _, 400, var(--blog-normal-text-color));
				padding: 5px 10px;
				&.is-active {
					color: white;
					background-color: var(--blog-box-bg-color-blue);
				}
				span {
					@include text-overflow();
				}
			}
		}
	}
</style>
